<template>
    <view class="container">
        <u-cell-group
            :customStyle="{
                paddingTop: '0'
            }"
            :border="false"
        >
            <u-cell
                title="头像"
                :isLink="true"
                :border="false"
                rightIconStyle="font-size: 28rpx"
                titleStyle="font-size: 30rpx;"
                @click="editAvatar"
            >
                <u-image
                    :src="avatar"
                    width="80rpx"
                    height="80rpx"
                    slot="value"
                    shape="circle"
                ></u-image>
            </u-cell>
            <u-cell
                title="昵称"
                :isLink="true"
                :border="false"
                rightIconStyle="font-size: 28rpx"
                titleStyle="font-size: 30rpx;"
                :value="nickName"
                @click="navigateTo('pages/setting/nickname')"
            >
            </u-cell>
            <u-cell
                title="手机号"
                :isLink="true"
                :border="false"
                :value="mobile"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                v-if="mobile"
                @click="navigateTo('pages/relievePhone/index')"
            ></u-cell>
            <u-cell
                title="手机号"
                :isLink="true"
                :border="false"
                value="去绑定"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                @click="navigateTo('pages/binding/index')"
                v-else
            ></u-cell>
            <u-cell
                title="实名认证"
                :isLink="true"
                :border="false"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                value="已认证"
                @click="navigateTo('pages/setting/information')"
                v-if="identify"
            ></u-cell>
            <u-cell
                title="实名认证"
                :isLink="true"
                :border="false"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                value="未认证"
                @click="navigateTo('pages/identify/index')"
                v-else
            ></u-cell>
            <u-cell
                title="收货地址"
                :isLink="true"
                :border="false"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                @click="navigateTo('pages/address/index')"
            ></u-cell>
            <u-cell
                title="交易密码"
                :isLink="true"
                :border="false"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                @click="navigateTo('pages/setting/setPassword')"
            ></u-cell>
            <u-cell
                title="收款方式"
                :isLink="true"
                :border="false"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                @click="navigateTo('pages_v2/paymentMethod/index')"
            ></u-cell>
            <u-cell
                title="关于我们"
                :isLink="true"
                :border="false"
                rightIconStyle="font-size: 28rpx"
                @click="navigateTo('pages/about/index')"
            ></u-cell>
            <u-cell
                title="用户协议"
                :isLink="true"
                :border="false"
                titleStyle="font-size: 30rpx;"
                rightIconStyle="font-size: 28rpx"
                @click="navigateTo('pages/article/detail')"
            ></u-cell>
        </u-cell-group>
        <view class="bottom">
            <u-button
                text="退出登录"
                :customStyle="{
                    height: '90rpx',
                    background: '#F8F8F8'
                }"
                @click="loginout()"
            ></u-button>
        </view>
    </view>
</template>
<script>
    import { baseUrl } from "@/config/config"
export default {
    methods: {
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        loginout() {
            this.$store.dispatch("user/loginout")
        },
        editAvatar() {
            const than = this
            uni.chooseImage({
                success: (chooseImageRes) => {
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    uni.showLoading({
                        title: '上传中'
                    })
                    uni.uploadFile({
                        url: baseUrl + '/v2/user/editAvatar',
                        filePath: tempFilePaths[0],
                        name: 'file',
                        header: {
                            token: this.$store.getters.token
                        },
                        success: (uploadFileRes) => {
                            const response = JSON.parse(uploadFileRes.data)
                            if (!response.isSuccess) {
                                than.$u.toast(response.msg)
                            }
                            const data = response.data
                            than.$store.dispatch("user/setAvatar", data.avatar)
                            uni.hideLoading()
                        }
                    });
                }
            })
        }
    },
    computed: {
        mobile() {
            return this.$store.getters.mobile
        },
        identify() {
            return this.$store.getters.identify
        },
        avatar() {
            return this.$store.getters.avatar
        },
        nickName() {
            return this.$store.getters.nickName
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        padding-top: 30rpx;
        position: relative;
        .bottom {
            position: fixed;
            box-sizing: border-box;
            padding: 0 20rpx;
            bottom: calc(var(--window-bottom) + 33rpx);
            left: 0;
            right: 0;
        }
        .beian {
            position: fixed;
            bottom: 60rpx;
            font-size: 24rpx;
            padding-left: 30rpx;
            color: #007aff;
        }
        ::v-deep .u-cell__body {
            padding: 30rpx;
        }
    }
</style>
